<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>保持元素宽高比</title>
	</head>
	<body>
		<!-- 第一种方法 -->
		<!-- 使用css的属性aspect-ratio来实现 -->
		<!-- @See: https://developer.mozilla.org/zh-CN/docs/Web/CSS/aspect-ratio -->
		<div class="container"></div>
		<style>
			.container {
				margin: 0 auto;
				width: 50%;
				aspect-ratio: 4 / 3;
				background-color: pink;
				margin-bottom: 5px;
			}
		</style>

		<!-- 第二种方法 -->
		<!-- 使用嵌套盒子，使用padding加上定位的方式来实现 -->
		<div class="outer">
			<div class="inner"></div>
		</div>
		<style>
			.outer {
				margin: 0 auto;
				width: 50%;
				background-color: pink;

				.inner {
					width: 100%;
					padding-bottom: 75%;
				}
			}
		</style>
	</body>
</html>
